<template>
	<view class="order">
		<view class="tab">
			<view class="tab_title" v-for="(item, index) in ['全部', '待付款', '待发货']">
				<view @click="tab(index)" :class="index === curIndex ? 'active' : ''">{{ item }}</view>
			</view>
		</view>
		<view class="containter">
			<view class="order_list" v-for="(item,index) in ordersList" :key='index'>
				<view class="serail">
					<view>订单编号</view>
					<view>{{item.order_number}}</view>
				</view>
				<view class="money">
					<view>订单金额</view>
					<view class="price">￥{{item.order_price}}</view>
				</view>
				<view class="date">
					<view>订单日期</view>
					<view>{{item.create_time | deteForm}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
export default {
	data() {
		return {
			curIndex: 0, // 切换tab 栏
			ordersList: []
		};
	},
	async onLoad(e) {
		// 这个是为了在个人中心页跳到订单查询的时候对用tab 栏的显示
		// 判断 如果下标为3 的话 就减一 因为订单查询中只有三个页面
		const number = Number(e.type)
		if(number == 0){
			this.curIndex = 1
		}else if (number == 1){
			this.curIndex = 2
		}else if(number == 3){
			this.curIndex = 0
		}
		this.getOrde(number || 0)
	},
	// 使用下载第三方的插件 过滤时间
	filters:{
		deteForm(value){
			return dayjs(value * 1000).format('YYYY/MM/DD HH:mm:ss')
		}
	},
	methods: {
		// 发起请求
		async getOrde(e){
			// 获取用户token
			const token = uni.getStorageSync('token');
			const [error, res] = await uni.request({
				url: 'https://api-hmugo-web.itheima.net/api/public/v1/my/orders/all',
				header: {
					Authorization: token
				},
				data:{ e }
			});
			console.log(res)
			this.ordersList = res.data.message.orders;
		},
		// 点击tab 栏切换
		tab(index) {
			// 判断 1:全部订单 2:待付款 3:待发货
			// 当tab 栏的下标为0 的参数就传一个 1 的参数 。。。。
			this.curIndex = index;
			if(this.curIndex == 0){
				this.getOrde(1)
			}else if(this.curIndex == 1){
				this.getOrde(2)
			}else if(this.curIndex == 2){
				this.getOrde(3)
			}
		}
	}
};
</script>

<style lang="less">
.order {
	.tab {
		display: flex;
		height: 88rpx;
		border-bottom: 1rpx solid #ccc;
		align-items: center;
		padding: 0 30rpx;
		view {
			flex: 1;
			display: flex;
			justify-content: center;
			height: 88rpx;
			align-items: center;
		}
		.active {
			border-bottom: 5rpx solid #ea4350;
			color: #000;
			font-weight: 600;
		}
	}
	.containter{
		 height: calc(100vh - 100rpx);
		 overflow: scroll;
	}
	.order_list {
		height: 250rpx;
		padding: 20rpx;
		.serail,
		.money,
		.date {
			display: flex;
			margin: 28rpx 0;
			justify-content: space-between;
			color: #696969;
			font-size: 30rpx;
		}
		.price {
			color: #ea4350;
		}
	}
}
</style>
